<template>
    <avue-crud
    :data="data"
    :option="option"
    :page="page"
    @size-change="sizeChange"
    @current-change="currentChange"
    ></avue-crud>
</template>


<script>
import axios from 'axios'
  export default {
    data() {
      return {
        page: {
          pageSize: 20,
          total: 0,
          currentPage: 1,
        },
        data: [],
        option: {
          align: 'center',
          menuAlign: 'center',
          column: [
            {
              label: '姓名',
              prop: 'name'
            },
            {
              label: '性别',
              prop: 'sex'
            }
          ]
        }
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList(page) {
        // this.$message.success('分页信息:' + JSON.stringify(page))
        //模拟分页
        axios.get('/news/index',{params: { pageSize: this.page.pageSize }}).then((res)=>{
            this.page.total = res.data.total;
            this.data = res.data.data;
            console.log(this.page.pageSize)
        })
        console.log('load............')
      },
      /**
       * @description: 点击页码会调用current-change方法回调当前页数
       * @param {Number} val  当前第几页
       * @return: 
       */
      currentChange(val) {
        this.page.currentPage = val;
        this.getList();
      },
      
      sizeChange(val) {
        console.log(val);
        this.page.pageSize = val;
        this.page.currentPage = 1;
        this.getList();
      }
    }
  }
</script>